<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/font-demo.css" />
    <title>Document</title>
  </head>
  <style>
    @font-face {
      /* ⾃定义的字体名字 */
      font-family: "Roboto-Italic";
      /*本地的字体地址*/
      src: url("../font/Roboto-Italic.ttf");
    }
    div {
      color: rgba(255, 0, 0, 0.5); /* 红⾊ */
      /* 取当前标签字体的颜色 */
      border: 1px solid currentColor;
      /* font-family: Arial, Helvetica, sans-serif; */
      /* 自定义的字体库 */
      /* font-family: "Roboto-Italic"; */
      /* font-style: italic; */
      font-weight: bolder;
      font: 15px arial, sans-serif;
      /* 垂直居中：单行元素内容 */
      height: 100px;
      /* 行高 */
      line-height: 180px;
      /* 字母间距 */
      /* letter-spacing: 10px; */
      /* 单词 */
      word-spacing: 10px;
      text-decoration: dotted;
    }
    .other {
      /* 字体改成小小的大写字母 */
      font-variant: small-caps;
      /* 文本缩进 */
      text-indent: 10px;
    }

    .vertical {
      font-size: 100px;
      height: 200px;
      line-height: 200px;
      background-color: aquamarine;
    }
    span {
      font-size: 40px;
      background-color: darkseagreen;
      /* 值1：不设置默认基线对⻬ */
      vertical-align: baseline;
      /* 值2：顶部对⻬ */
      vertical-align: top;
      /* 值3：底部对⻬ */
      vertical-align: bottom;
      /* 值4：居中对⻬（使元素的中部与⽗元素的基线加上⽗元素 x-height（译注：x ⾼度）的⼀半对⻬。） */
      vertical-align: middle;
    }
    img {
      vertical-align: middle;
    }

    .div1 {
      height: 200px;
      background-color: aquamarine;
    }
    .div2 {
      height: 80px;
      height: 80px;
      background-color: red;
      vertical-align: middle;
    }
  </style>
  <body>
    <div>dddDD Apple</div>
    <div class="other">dddDD</div>
    <hr />
    <div class="vertical">
      ⽂本垂直对⻬ x <span>x橙⼦</span>
      <img src="../img/myimg.jpeg" alt="" height="100" />
    </div>
    <hr />
    <div class="div1">
      <div class="div2"></div>
    </div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <!-- border: 不仅对表格加border，还对单元格加border -->
    <table border="1">
      <caption>
        我的表格
      </caption>
      <thead>
        <tr>
          <th>头1</th>
          <th>头2</th>
          <th>头3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td colspan="2"></td>
          <td>列1</td>
          <!-- <td>列3dddddddddddd</td> -->
        </tr>
        <tr>
          <td></td>
          <td>列1</td>
          <td>列3dddddddddddd</td>
        </tr>
      </tbody>
    </table>

    <div class="img-bg"></div>
  </body>
</html>
